<template>
    <div>
        <div style="margin-bottom: 10px;">
            邮箱：<el-input v-model="email" style="width: 100%" placeholder="请输入邮箱" />
        </div>
        <div>
            密码：<el-input v-model="password" style="width: 100%" show-password placeholder="请输入密码" />
        </div>
        <span style="font-size: small;position: relative;left: 66%;">忘记密码</span>
        <div style="margin-top: 10px;width: 100%;text-align: center;">
            <el-button type="primary" @click="login()">登录</el-button>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import router from '@/router';
import { ElMessage } from 'element-plus';
export default {
    name: "loginView",
    setup() {
        let email = ref("");
        let password = ref("");
        let store = useStore();

        let login = () => {
            if (email.value == "" || password.value == "") {
                ElMessage({
                    message: '邮箱或密码为空',
                    type: 'error',
                    plain: true,
                })
                return;
            }
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3000/userHandle/login/",
                cache: false,
                async: false,
                data: {
                    email: email.value,
                    password: password.value
                },
                success(resp) {
                    console.log(resp);
                    if (resp.state == "success") {
                        let t = ref({
                            name: resp.name,
                            token: resp.token,
                            photo: resp.photo,
                            id: resp.id,
                        });
                        store.dispatch("login", t.value);
                        router.push({ path: "/infoShow/" });
                    } else {
                        ElMessage({
                            message: '账号或密码错误',
                            type: 'error',
                            plain: true,
                        })
                    }

                }
            });
        }
        return {
            login,

            email,
            password,
        }
    }
}
</script>

<style scoped>
div {
    margin: auto;
    width: 50%;
    font-size: large;
}

span:hover {
    color: red;
    cursor: pointer;
}
</style>